<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,ul,li,h3{
            margin: 0;
            padding: 0;
        }        

        #box{
            width: 200px;
            height: 200px;
            background: pink;
            position: absolute;
        }
    </style>
    <script src="../jquery-3.3.1.min.js"></script>
</head>
<body>
    
    <div id="box">
      
    </div>
    <script>
        $(function(){
            $('#box').mousedown(function(event){
                $(this).html('按下');
                $(this).css('background','orange');
                var event = event || window.event;
                var ox = event.offsetX;
                var oy = event.offsetY;
                $(document).mousemove(function(eve){
                    var px = eve.pageX;
                    var py = eve.pageY;
                    var x = px - ox;
                    var y = py - oy;
                    $('#box').css({
                        left: x,
                        top: y, 
                    });

                });

            }).mouseup(function(){
                $(this).html('松开');
                $(this).css('background','skyblue');
                $(document).off('mousemove')
            });
        });

        $(function(){
            var arr = [1,2,3,4,5];
            $.each( arr , function(i, n){
                console.log(i+' : '+n);
            });
        });
    </script>
</body>
</html>